---
name: CrossFadeMove
route: /cross-fade-move
menu: Focal motions
---

import { Playground, Props } from 'docz';
import * as Common from '@element-motion/dev';
import { Motion } from '@element-motion/utils';
import CrossFadeMove from '../index';
import * as Styled from './styled';

# CrossFadeMove

Is a composite motion of [FadeMove](/fade-move) and [Move](/move).
Useful for moving an element moving from one position to another when the elements have **stark visual differences** to each other.

## Usage

```js
import Motion, { CrossFadeMove } from '@element-motion/core';
```

<Playground>
  <Common.Toggler interval>
    {({ shown, toggle }) =>
      shown ? (
        <Motion name="cross-fade-move" key="1">
          <CrossFadeMove>
            {({ ref, style }) => (
              <Styled.Box onClick={() => toggle()} style={style} ref={ref}>
                Hello, world!
              </Styled.Box>
            )}
          </CrossFadeMove>
        </Motion>
      ) : (
        <Motion name="cross-fade-move" key="2">
          <CrossFadeMove>
            {({ ref, style }) => (
              <Styled.Box style={style} ref={ref} onClick={() => toggle()} alignRight />
            )}
          </CrossFadeMove>
        </Motion>
      )
    }
  </Common.Toggler>
</Playground>

## Props

<Props of={CrossFadeMove} />
